Closes #36054. The solution is to run matchMedia on the client side side when React calls getServerSnapshot. The docs says:

optional getServerSnapshot: A function that returns the initial snapshot of the data in the store. It will be used only during server rendering and during hydration of server-rendered content on the client. The server snapshot must be the same between the client and the server, and is usually serialized and passed from the server to the client. If this function is not provided, rendering the component on the server will throw an error.

https://beta.reactjs.org/reference/react/useSyncExternalStore

In our case, when a developer set noSsr: true he explicitly opt-out from trying to hydrate with the first server-side render, while he also server-side render. The concern of tearing in #30655 should be OK since this change only impacts the server snapshot, React will update if needed when calling getSnapshot.